<template>
    <div class="page">
        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">飞拉专属红包领取</h1>
        </div>
        <div class="red-cont">
            <div class="red-cont-logo">
                <div class="red-cont-logo-showimg looo"><img src="../assets/FLred-envelope-logo.png" alt=""><p>专属红包</p></div>
                <div class="red-cont-logo-showimg chassis-btn">
                    <img src="../assets/FLred-envelope-chassis.png" alt="">
                    <div class="chassis-btn-cli" @click="Getenvelogin">
                        <p>点击领取</p>
                    </div>
                </div>
                <div class="red-cont-logo-showimg"><img src="../assets/FLred-envelope-logorules.png" alt=""></div>
            </div>
            <div class="red-cont-chassis"></div>
        </div>
        <div class="red-rules">
            <p>1.领取红包必须先注册成商城会员，登录后即可领取；</p>
            <p>2.使用有效期以实际到账为准；</p>
            <p>3.优惠券每单只可使用一张，无法叠加使用；</p>
            <p>4.红包可在，我的-旅行红包，点击查看详情信息。</p>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { mapState } from 'vuex'
    import { Toast,MessageBox } from 'mint-ui';
    import wxShare from "../store/wxShare"
    import config from "../store/config"
    import judgeURL from "../store/judgeURL"
    import storage from "../store/localstorage"
    import TicketRole from "../components/TicketRole"
    import Pop from "../components/Pop"
    import store from "../store/store"

    export default {
        name: "My-ticket-other",
        data() {
        return {
            feila:'https://i.kuaibangxing.com/feila.png',
            code:'',
            password:'kbx123456',
            tabCurr: 0,
            tabMenu: [{name: '领取'}, {name: '兑换'}],
            ticketList:[],   //type 1折扣 2满减  status 1去完成 2可领取 3已领取 4过期
            shareView: true, //分享
            status:['','去完成','点击领取','已领取','已过期'],
            roleInfoShowState: false
        }
    },
        computed: mapState({
            showPop: state => state.showPop,
        }),
    methods: {
        closeRoleFn(state){
            this.roleInfoShowState = state;
        },
        tabFun(val) {
            this.tabCurr = val;
        },
       //判断用户是否登录
        Getenvelogin(){
            if(!this.$store.state.token){
                this.$router.push({path:"/my-login"})
                return;
            }else{
                if(storage.get('partner_id')=='kbx'){
                    console.log("55555555555")
                    this.$router.push({path:"/home"})
                }else{
                    this.Getenvelope()
                }

            }
        },

        Getenvelope(){
            let params = {
                coupon_id:20,
            }
            this.axios.postAll('/flgetcoupon',params)
                    .then(res=>{
                if(res.data.code == '0'){
                    Toast({message: res.data.msg, duration: 1500});
                    this.$router.push({path: "/my-ticket"})
                }else{
                    Toast({message: res.data.msg, duration: 2000});
                }
            })
        },
        //获取列表
   /*     getTicketList(){
            this.axios.postAll('/wapcouponlist')
                    .then(res=>{
                if(res.data.code == '0'){
                    this.ticketList=res.data.data;
                    this.ticketList.forEach(item=>{
                        item.price=item.price.replace('.00','');
                    });
                }

            })
        },*/
        //操作优惠券 分享、领取
        optTicket(index){
            console.log(index);
            if(this.ticketList[index].status==1){
                this.shareView=!this.shareView;
                this.share(index);
            }else if(this.ticketList[index].status==2){
                console.log('领取')
                this.axios.post('/waporderdiscountuser',{member_id:this.ticketList[index].member_id, order_id:this.ticketList[index].order_id,sharenum:this.ticketList[index].sharenum,coupon_id:this.ticketList[index].id})
                        .then(res=>{
                    MessageBox({
                        title: '提示',
                        message: "旅行红包领取成功，去查看？",
                        confirmButtonText:'确定',
                        showCancelButton: true,
                        closeOnClickModal:false,
                    }).then(res=>{
                        if(res=='confirm'){
                            this.$router.push('/my-ticket')
                        }else{
                            this.ticketList[index].status = 3;
                            return;
                        }
                    });
                })
            }
        },

        formSubmit: function () {
            var _that = this;
            if (!_that.code) {
                Toast({message:'请输入CODE', duration: 1000});
                return false;
            }
            if (!_that.password) {
                Toast({message:'请输入需领取密码', duration: 1000});
                return false;
            }
            _that.axios.post('/kbxcoupon',{code:_that.code,pwd:_that.password})
                    .then(res => {
                this.$router.push({path:"/my-ticket/"})
            })
        .catch(err => console.log(err));
        },

        // 分享
        share() {

            var userinfo = storage.get('userinfo');
            var uid='';
            if(userinfo.member_id){
                uid=userinfo.member_id;
            }
            var partner_id='fl';
            console.log(partner_id)
            wxShare({
                title: '飞拉旅行&快帮行|北美定制游', // 分享标题
                desc: '飞拉旅行&快帮行，北美定制游,玩点不一样的', // 分享描述
//                link: config.url+'/quick_help_wap1/#/My-ticket-other-FL/'+this.ticketList[index].goods_id+'?order_id='+this.ticketList[index].order_id+'&uid='+uid+'&partner_id='+partner_id, // 分享链接
                link: config.url+'/quick_help_wap1/#/My-ticket-other-FL/?uid='+uid+'&partner_id='+partner_id, // 分享链接新的飞拉旅行的
                imgUrl:this.feila, // 分享图标
                debug: false
            }, function () {//分享成功后的回调函数
                //Toast({message: '分享成功！', duration: 1500});
                console.log('分享成功')
            });
        },
    },
    mounted(){
//        this.getTicketList();
        this.share();
        store.commit('setshowPop', true);
        },
        /*created(){
            if (!this.$store.state.token) {
                store.commit('setshowPop', true); //请求微信授权
            }

        }*/
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }b

    .h120 {
        height: rpx(60);
        background: $bgcolor1;
    }
    .page{
        /*position: relative;*/
        background-image: url("../assets/FLred-envelope.png");
        background-size: 100%;
        /*background: $bgcolor1;*/
        min-height: 100%;
    }
    .red-cont{
        &-logo{
             padding: rpx(0) rpx(35);
             text-align:center;
                &-showimg{
                     text-align:center;
                    >img{
                         width: 100%;
                     }
                    > p{
                        font-size: rpx(100);
                        padding-bottom: rpx(60);
                        color: #fff;
                      }
                 }

         }

    }
    .looo{
        padding-left: rpx(10);
    }
    .red-rules{
        padding: rpx(25) rpx(30) rpx(60) rpx(30);
        font-size: rpx(28);
        color: #fff;
        >p{
            padding: rpx(20) rpx(10);
         }
    }
    .chassis-btn{
        position: relative;
        padding: rpx(50) 0;
    }
    .chassis-btn-cli{
        position: absolute;
        top:50%;
        left:28%;
        width: rpx(280);
        height: rpx(70);
        border-radius:rpx(40);
        background:rgb(248,182,64);
        color: red;
        >p{
            line-height: rpx(70);
            font-size: rpx(38);
            font-weight: bold;
             color: red;
            text-shadow:rpx(1) rpx(1) rpx(1) #fff;
             -webkit-text-stroke: rpx(1) #fff;
         }
    }
    .header{
        display: flex;
        align-items: center;
        padding:rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
    &-btnLeft{
         width: rpx(64);
         height: rpx(64);
         padding-top: rpx(16);
    img{
        width: rpx(32);
        height: rpx(32);
    }
    }
    &-btnRight{
         color: #5D5D5D;
     }
    &-title{
         flex: 1;
         font-size: rpx(36);
         text-align: center;
         font-weight: normal;
     }
    }


    .tab {
        background: $color0;
    &-menu {
         display: flex;
     }
    &-menu-item {
         flex: 1;
         padding: rpx(30) rpx(20);
         text-align: center;
         color: $color5;
         font-size: rpx(32);
         border-bottom: solid $color2 rpx(4);

    &.active {
         color: $color3;
         border-bottom: solid $color3 rpx(4);
     }
    }
    }
    .ticket{
    &-bar{
         width: 100%;
     }
    &-list{
         margin:rpx(30);
    &-item{
         display: flex;
         align-items: center;
         margin-bottom: rpx(20);
         padding: rpx(40) 0;
         background:$color0;
         border-radius: rpx(10);
    &-price{
         width: rpx(180);
         text-align: center;
         color: $color3;
    .num{
        font-size: rpx(62);
    }
    }
    &-info{
         flex: 1;
    &-title{
         padding-bottom: rpx(10);
         font-size: rpx(32);
         font-weight: normal;
     }
    &-desc{
         color:$color5;
     }
    }
    &-opt{
         margin-right: rpx(20);
         text-align: right;
    .btn{
        display: block;
        width: rpx(140);
        height: rpx(60);
        line-height: rpx(60);
        background: $color5;
        border-radius: $radius6;
        color: $color0;
        font-size: rpx(28);
        text-align: center;
    }
    .active{
        background: $color7;
    }
    .success{
        background: $bgcolor1;
        color: #999;
    }
    }
    }
    }
    }

    //项列表
      .list {
          margin: rpx(30);
    &-item {
         display: flex;
         align-items: center;
         overflow: hidden;
         background: $color0;
         padding:rpx(35) rpx(30);
         border-bottom: solid 1px $color2;
    &-input {
         flex: 1;
         display: flex;
         align-items: center;
         font-size: rpx(34);
    input{
        font-size: rpx(34);
        width: 100%;
    }
    }
    }
    }
    .incomeSubmit{
        padding: rpx(60) 0 ;
    &-btn{
         display: block;
         width: 100%;
         height: rpx(100);
         line-height: rpx(100);
         background: $color3;
         border-radius: $radius6;
         color: $color0;
         font-size: rpx(34);
         text-align: center;
     }
    }

    .program-about{
        padding: rpx(30);
    &-img{
         width: 100%;
         height: auto;
     }
    }

    //分享
      .share {
    &-div {
         position: fixed;
         background: rgba(0, 0, 0, .5);
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         z-index: 999;
         width: 100%;
         height: 100%;
         text-align: center;
    &-img {
         margin-top: rpx(30);
         width: rpx(500);
         height: rpx(220);
     }
    }
    }

</style>
